<template>
	<div>
		<div>
			<div class="flex items-center justify-between slot-card__header">
				<div class="flex items-center">
					<base-button
						class="w-[28px] rounded-sm px-[5px] bg-bg-4"
						@click="handleBack"
						size="small"
						:block="false">
						<base-icon name="back" />
					</base-button>
					<span class="pl-2 text-t-1 text-[24px]">
						{{ title }}
					</span>
				</div>
				<supplier-filter :type="type" :defaultValue="defaultId" @change="changeSupplier" />
			</div>
		</div>
		<div>
			<!-- <div class="mb-2 mt-4">
				<base-toggle-group :model-value="modelValue" :data="data" @update:model-value="onChange" />
			</div> -->
			<slots-list
				ref="slotListRef"
				type="casino-provider"
				:providerId="title"
				:selectId="modelValue"
				multiple />
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SlotsList from '../slots-card/slots-list.vue'
import { BaseButton, BaseIcon } from '@/components/base'
import SupplierFilter from '../slots-card/supplier-filter.vue'
// import { t } from '@/utils/index'
import { getCasinoProvidersData } from '@/api/casino'
import { getProvidersData } from '@/api/slots'
import { useSlotStore, useCasinoStore, useAppStore } from '@/store'

const modelValue: any = ref('')
const slotListRef: any = ref(null)
const route = useRoute()
const router = useRouter()
const slotStore = useSlotStore()
const casinoStore = useCasinoStore()
const appStore = useAppStore()

// const title = ref(route.query.name)
const defaultId: any = ref(Number(route.params.id))
const props = defineProps({
	type: {
		type: String,
		default: 'slots'
	}
})

const supplierList = computed(() => {
	if (props.type === 'casino') {
		return casinoStore.providerList?.map((item: any) => {
			return {
				...item
				// providerNameBak:
				// 	item.providerName === 'Evolution' ? 'evo' : item.providerName === 'AsiaGaming' ? 'ag' : ''
			}
		})
	}
	return slotStore.providerList
})

const title = computed(() => {
	// console.log(route.params.id, supplierList.value)
	// const currentItem = supplierList.value.find(
	// 	(item: any) =>
	// 		route.params.id === item.id + '' ||
	// 		defaultId.value[0] === item.pid ||
	// 		route.params.id === item.pid + ''
	// )
	// console.log(currentItem)
	// if (currentItem) {
	// 	return currentItem.portalDisplayName || currentItem.providerName
	// }
	const routeId = route.params.id
	return Array.isArray(routeId) ? routeId[0] : routeId
})

// const data = computed(() => {
// 	if (props.type === 'casino') {
// 		return [
// 			{
// 				icon: 'love2',
// 				id: 'favorite',
// 				text: t('slotsall.favorite')
// 			},
// 			{
// 				icon: 'fire',
// 				id: 'all',
// 				text: t('tip.all')
// 			},
// 			{
// 				icon: 'event',
// 				id: 'promo',
// 				text: t('slotsall.promotion')
// 			},
// 			{
// 				icon: 'baccarat',
// 				id: 'baccarat',
// 				text: t('casinoAll.baccarat')
// 			},
// 			{
// 				icon: 'blackjack',
// 				id: 'blackjack',
// 				text: t('casinoAll.blackjack')
// 			},
// 			{
// 				icon: 'sicbo',
// 				id: 'sicbo',
// 				text: t('casinoAll.sicbo')
// 			},
// 			{
// 				icon: 'roulette',
// 				id: 'roulette',
// 				text: t('casinoAll.roulette')
// 			},
// 			{
// 				icon: 'dragontiger',
// 				id: 'dragontiger',
// 				text: t('casinoAll.dragonTiger')
// 			},
// 			{
// 				icon: 'poker',
// 				id: 'poker',
// 				text: t('casinoAll.poker')
// 			},
// 			{
// 				icon: 'gameshow',
// 				id: 'gameshow',
// 				text: t('casinoAll.gameShow')
// 			}
// 		]
// 	}
// 	return [
// 		{
// 			icon: 'love2',
// 			id: 'favorite',
// 			text: t('slotsall.favorite')
// 		},
// 		{
// 			icon: 'fire',
// 			id: 'popular',
// 			text: t('slotsall.popular')
// 		},
// 		{
// 			icon: 'new',
// 			id: 'new',
// 			text: t('slotsall.new')
// 		},
// 		{
// 			icon: 'event',
// 			id: 'promo',
// 			text: t('activity.title')
// 		},
// 		{
// 			icon: 'RTP',
// 			id: 'rtp',
// 			text: 'RTP'
// 		},
// 		{
// 			icon: '',
// 			id: 'a2z',
// 			text: 'A-Z'
// 		},
// 		{
// 			icon: '',
// 			id: 'z2a',
// 			text: 'Z-A'
// 		}
// 	]
// })

// const onChange = (val: string) => {
// 	console.log(val, modelValue.value)
// 	if (val !== modelValue.value) {
// 		modelValue.value = val
// 		// router.replace({
// 		// 	name: route?.name,
// 		// 	params: {
// 		// 		id: route?.params.id
// 		// 	},
// 		// 	query: {
// 		// 		type: val
// 		// 	}
// 		// })
// 		nextTick(() => {
// 			changeSupplier(defaultId.value)
// 		})
// 	}
// }

const changeSupplier = (val: any) => {
	console.log(val)
	defaultId.value = val
	// let paramsId = val[0]
	// if (props.type === 'casino') {
	// 	paramsId = supplierList.value.find((item: any) => item.pid === val[0])?.providerNameBak
	// }
	// router.replace({
	// 	name: props.type === 'casino' ? 'CasinoProviderDetail' : 'SlotsProviderDetail',
	// 	params: {
	// 		id: paramsId
	// 	},
	// 	query: {
	// 		type: modelValue.value
	// 	}
	// })
	slotListRef.value.getList(true, val)
	// const currentItem = supplierList.value.find((item) => {
	// 	if (item.id && item.id === val[0]) {
	// 		return true
	// 	}
	// 	if (item.pid && item.pid === val[0]) {
	// 		return true
	// 	}
	// })
	// title.value = currentItem?.portalDisplayName || currentItem?.providerName
}

const handleBack = () => {
	router.back()
}

const getProviderList = async () => {
	if (props.type === 'slots') {
		const { data } = await getProvidersData()
		slotStore.setProviderList(data)
	}
	if (props.type === 'casino') {
		const { data } = await getCasinoProvidersData()
		casinoStore.setProviderList(data.list)
	}
}

// const formatProviderName = (name: any) => {
// 	if (name === 'evo') {
// 		return 'Evolution'
// 	} else if (name === 'ag') {
// 		return 'AsiaGaming'
// 	}
// }

watch(
	() => appStore.region,
	async () => {
		await getProviderList()
		// if (props.type === 'casino') {
		// 	const providerName = formatProviderName(route.params.id)
		// 	const currentItem = supplierList.value.find((item: any) => item.providerName === providerName)
		// 	console.log(currentItem)
		// 	if (!currentItem) {
		// 		defaultId.value = [supplierList.value[0].pid]
		// 		changeSupplier(defaultId.value)
		// 	}
		// } else {
		const currentItem = supplierList.value.find((item: any) => item.id === defaultId.value[0])
		if (!currentItem) {
			defaultId.value = [supplierList.value[0].id]
			changeSupplier(defaultId.value)
		}
		// }
	}
)

onMounted(async () => {
	await getProviderList()
	if (!modelValue.value) {
		if (props.type === 'slots') {
			modelValue.value = route.query.type || 'popular'
		}
		if (props.type === 'casino') {
			modelValue.value = route.query.type || 'all'
		}
	}
	nextTick(() => {
		// if (props.type === 'casino') {
		// 	const providerName = formatProviderName(route.params.id)
		// 	console.log(providerName)
		// 	const currentItem = supplierList.value.find((item: any) => item.providerName === providerName)
		// 	console.log(currentItem)
		// 	if (currentItem) {
		// 		defaultId.value = [currentItem.pid]
		// 	}
		// } else {
		defaultId.value = [defaultId.value]
		// }
		changeSupplier(defaultId.value)
	})
})
</script>
<style lang="scss" scoped>
.slot-card__header {
	:deep(.n-popover) {
		padding: 0 !important;
	}
}
</style>
